<template>
  <div class="main">
    <div class="inputs">
      <el-form ref="Form" label-width="110px">
        <div class="row">
          <el-form-item label="运输任务编号:">
            <el-input v-model="form.task" style="width: 350px;" placeholder="请输入运输状态编号" />
          </el-form-item>
          <el-form-item label="起始地机构:">
            <!-- <el-input style="width: 350px;" /> -->
            <!-- 下拉 树形图 关键select需要option 关键思路隐藏 option 直接显示自适应树状结构   -->
            <el-select ref="selectTree" v-model="selectValue" class="main-select-tree select" style="width: 350px;">
              <el-option v-for="item in treeData" :key="item.id" :label="item.name" :value="value" style="display: none;" />
              <el-tree
                ref="selecteltree"
                class="main-select-el-tree"
                :data="treeData"
                node-key="id"
                highlight-current
                :props="{label:'name',children:'children'}"
                :expand-on-click-node="false"
                @node-click="hasValue"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="目的地机构:">
            <!-- <el-input style="width: 350px;" /> -->
            <el-select ref="selectTree" v-model="destination " class="main-select-tree select" style="width: 350px;">
              <el-option v-for="item in treeData" :key="item.id" :label="item.name" :value="value1" style="display: none;" />
              <el-tree
                ref="destination"
                class="main-select-el-tree"
                :data="treeData"
                node-key="id"
                highlight-current
                :props="{label:'name',children:'children'}"
                :expand-on-click-node="false"
                @node-click="hasValue1"
              />
            </el-select>
          </el-form-item>
        </div>
        <div class="row">
          <el-form-item label="回车时间:">
            <el-date-picker
              v-model="form.time"
              prefix-icon="el-icon-timer"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            />
          </el-form-item>
          <el-form-item label="车辆是否可用:">
            <el-select v-model="form.car" placeholder="请选择" style="width: 350px;">
              <el-option
                v-for="item in carOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <div class="btn">
            <el-button type="danger" @click="search">搜索</el-button>
            <el-button @click="reset">重置</el-button>
          </div>
        </div>
      </el-form>
    </div>
    <div class="table">
      <div class="bader">
        <el-table :header-cell-style="{background:'#f8faff'}">
          <el-table-column
            label="运输任务编号"
          />
          <el-table-column
            label="起始地机构"
          />
          <el-table-column
            label="目的地机构"
          />
          <el-table-column
            label="运单数量"
          />
          <el-table-column
            label="出车时间"
          />
          <el-table-column
            label="回车时间"
          />
          <el-table-column
            label="车牌号码"
          />
          <el-table-column
            label="车辆是否可用"
          />
          <el-table-column
            label="操作"
            width="80"
          />
          <template #empty>
            <div>
              <img class="nullImg" :src="imgUrl" alt="">
              <span class="nullText">{{ isSearch?'这里空空如也':'没有找到您要的内容哦~' }}</span>
            </div>
          </template>
        </el-table>
      </div>

    </div>
  </div>
</template>

<script>
import { getManageTree } from '@/api/manager'
export default {
  data() {
    return {
      value: 11,
      value1: 11,
      form: {
        car: '',
        task: '',
        time: []
      },
      destination: '',
      selectValue: '',
      treeData: [],
      imgUrl: 'https://slwl-admin.itheima.net/static/img/pic-kong.742d3899.png',
      isSearch: true,
      carOptions: [
        { label: '全部', value: '1' },
        { label: '可用', value: '2' },
        { label: '不可用', value: '3' }
      ]
    }
  },
  async created() {
    const res = await getManageTree()
    this.treeData = JSON.parse(res)
  },
  methods: {
    async search() {
      this.isSearch = false
      this.imgUrl = 'https://slwl-admin.itheima.net/static/img/icon-empty.3abd3b9a.png'
    },
    reset() {
      this.isSearch = true
      this.imgUrl = 'https://slwl-admin.itheima.net/static/img/pic-kong.742d3899.png'
      this.form.car = ''
      this.form.task = ''
      this.form.tame = []
      this.selectValue = ''
      this.destination = ''
    },
    hasValue(row) {
      // this.courier.agentId = row.id
      console.log(row.name)
      this.selectValue = row.name
      this.$refs.selectTree.blur()
    },
    hasValue1(row) {
      // this.courier.agentId = row.id
      console.log(row.name)
      this.destination = row.name
      this.$refs.destination.blur()
    }

  }

}
</script>

<style scoped>
.inputs{
    height: 170px;
    border-radius: 10px;
    background-color: #fff;
    padding:  20px;

}
.table{
  margin-top: 20px;
  background-color: #fff;
  border-radius: 10px;
  padding: 20px;
}
.row{
  display: flex;
  justify-content: space-between;
}
.btn{
  width: 460px;
}
.bader{
  border: 1px solid #eef0f6;

}
.nullImg{
  margin-top: 20px;
    width: 25%;
    height: 25%;
}
.nullText{
  display: block;
  margin-bottom: 25px;
}
</style>
